<template>
  <div id="box">
    <div id="pagehead">
      <div id="pageheaddiv"></div>
      <span id="pageheadspan">团课管理</span>
      <!-- <el-button
        @click="exit"
        id="pageheadbtn"
        type="primary"
        icon="el-icon-user"
        circle
      ></el-button> -->
    </div>
    <div id="content">
      <div id="viptable">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            label="支持会员卡（储值卡请填写扣费金额，次卡请填写扣费次数）"
          >
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column prop="name" label="会员卡名称" width="120">
            </el-table-column>
            <el-table-column prop="status" label="会员卡类型" width="120">
            </el-table-column>
            <el-table-column prop="card" label="支持场馆" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="card" label="扣费设置" show-overflow-tooltip>
              <span id="tablespan1">每节课收费</span>
              <div id="tableinp">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
              </div>
              <span id="tablespan2">元/人</span>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button @click="toggleSelection([tableData[1], tableData[2]])"
            >切换第二、第三行的选中状态</el-button
          >
          <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
      </div>
      <div id="pagefoot">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="size"
          @current-change="change"
          @prev-click="prev"
          @next-click="next"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      size: 5,
      total: 0,
      id: 1,
      user: "",
      con: "",
      tableData: [],
      data: [
        {
          id: this.id,
          user: this.user,
          con: this.con,
        },
      ],
      multipleSelection: [],
      input: "",
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getCon() {
      this.$axios({
        url: "/gym/user/list",
        method: "post",
        dataType: "json",
        params: {
          page: this.page,
          size: this.size,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },
    change(v) {
      this.page = v;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },
    exit() {
      window.location.href = "";
    },
  },
  mounted() {
    this.getCon();
  },
};
</script>
<style scoped>
#pagehead {
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, #000, #fff);
}
#pageheaddiv {
  width: 4px;
  height: 30px;
  background: #409eff;
  float: left;
  margin-top: 5px;
  margin-left: 5px;
}
#pageheadspan {
  color: #fff;
  float: left;
  line-height: 40px;
  font-weight: bold;
  margin-left: 5px;
}
#pageheadbtn {
  float: right;
  margin-right: 50px;
  background: transparent;
  color: #000;
}
#content {
  border: 1px solid red;
  width: 95%;
  margin-left: 25px;
  margin-top: 80px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
#viptable {
  width: 95%;
  margin-left: 25px;
  margin-top: 20px;
}
#tableinp {
  width: 100px;
}
#tablespan1 {
  float: left;
  line-height: 45px;
  padding-right: 10px;
}
#tablespan2 {
  float: right;
  margin-right: 80px;
  margin-top: -30px;
}
#pagefoot {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
</style>